import React, { Component } from 'react'
import ComB from './ComB'
import ComD from './ComD'
import './ComA.css'

export default class ComA extends Component {
  constructor() {
    super();
    console.log('1-生命周期constructor');
    this.state = {
      msg1: 'hello',
      obj1: { age: 19 },
      num: 20,
      showComB: true
    }
    this.ComD1 = React.createRef();
  }
  static getDerivedStateFromProps(props, state) {
    // getDerivedStateFromProps一定要加上static这个前缀
    // 根据props修改state,如果不想修改state就返回null
    console.log('2-生命周期getDerivedStateFromProps');
    console.log(props, state);
    return null
  }
  tranFn(val) {
    console.log('正在执行...');
    console.log(val);
  }
  componentDidMount() {
    // 组件已经渲染完成，类似vue的mounted
    console.log('4-生命周期componentDidMount');
    console.log(this.ComD1.current);
  }
  changeState() {
    this.setState({
      num: 5,
      msg1: 'Bye~',
      showComB: !this.state.showComB
    })
  }
  shouldComponentUpdate() {
    // 当数据变化时，询问组件是否需要更新，要返回true/false
    // 如果返回true，就会更新页面，调用render
    // 如果返回false，就不会更新页面，不调用render
    console.log('5-生命周期shouldComponentUpdate');
    return true
  }
  render() {
    console.log('3-生命周期render');
    console.log(this.state);
    return (
      <div>
        {/* 父传子，通过子组件的属性传值，子组件通过props接收，单向数据流，父传给子的数据是只读的 */}
        {/* 子传父，父组件先向子组件传递一个函数，在子组件调用这个函数时，传入的参数就是子传父的数据 */}
        {/* props和state的区别：如果只是调用，不修改就没有区别；state是自己的数据，props是父组件传过来的数据；state可以通过setState修改，props是只读属性 */}
        <p>我是父组件</p>
        <button onClick={() => this.changeState()}>修改state-{this.state.num}</button>
        <div className="border">
          <ComD ref={this.ComD1}></ComD>
          {/* {this.state.showComB?
          <ComB
            info1={this.state.msg1}
            info2="来自父组件的问候"
            obj1={this.state.obj1}
            num={this.state.num}
            fn={(val) => this.tranFn(val)}
          ></ComB>
          : null} */}
        </div>
      </div>
    )
  }
}
